<template>
  <div class="main">
    <van-row>
      <van-col @click="backPage"> <van-icon name="arrow-left" />返回 </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <h3 :style="{ 'margin-top': height * 0.06 + 'px' }">剥壳者批发商城</h3>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col>密码找回</van-col>
    </van-row>
    <van-form @submit="onSubmit" class="from">
      <van-field
        v-model="phone"
        name="用户名"
        left-icon="manager-o"
        placeholder="请输入手机号"
        clearable
        :rules="[{ required: true, message: '*手机号不能为空' }]"
      />
      <van-button
        type="primary"
        size="small"
        @click="getCode"
        native-type="button"
        style="margin: 0.625rem 0 0 2.1875rem"
        loading-text="获取验证码"
        >获取验证码</van-button
      >
      <van-field
        v-model="code"
        name="用户名"
        left-icon="manager-o"
        placeholder="请输入验证码"
        clearable
        :rules="[{ required: true, message: '*验证码不能为空' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        left-icon="manager-o"
        placeholder="请输入密码"
        clearable
        :rules="[{ required: true, message: '*密码不能为空' }]"
      />
      <van-field
        v-model="twoPassword"
        type="password"
        name="密码"
        left-icon="manager-o"
        placeholder="请再次输入密码"
        clearable
        :rules="[{ required: true, message: '*密码不能为空' }]"
      />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="button" @click="goLogin"
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "forgot",
  data() {
    return {
      height: window.innerHeight,
      phone: "",
      code: "",
      password: "",
      twoPassword: "",
      pattern: /\d{6}/,
    };
  },
  create() {
    console.log("============", this.height);
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    goLogin() {
      //   this.$router.push("/login");
    },
    //获取验证码
    getCode() {},
    backPage() {
      console.log(111);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 1.25rem;
  color: white;
  background-color: #4bd863;
  height: 17.5rem;
  border-radius: 0 0 2.5rem 2.5rem;
  .from {
    border-radius: 0.3125rem;
    padding: 1.875rem 0.625rem;
    margin-top: 1.5625rem;
    background: white;
    box-shadow: 0.125rem 0.125rem 0.125rem 0.09375rem rgba(0, 0, 0, 0.315);
  }
  .forgotPwd {
    color: #93e8a1;
    text-align: right;
    margin-top: 5px;
  }
  .btn-login {
    border-radius: 0.625rem;
  }
}
</style>